//
// section-nav
//
.section_trial {
    color: $color-gray-darker;
    .boxes {
        border: 1px solid $color-gray-lighter;
        padding: 15px;
        margin-bottom: 15px;
        background-color: white;
    }
    .btn-z {
        margin: 10px auto;
        font-size: 20px;
    }
}

//
// section-api
//
.page-api,
.page-installing,
.page-upgrading {
    .row {
        width: 100%;
        .col,
        .col-lg-6 {
            .card {
                border: 1px solid $color-gray-darkest;
                .card-header {
                    background-color: $color-gray-darkest;
                    border-radius: 0;
                    color: white;
                }
                ul {
                    list-style: none;
                    padding: 0;
                }
                border-radius:0;
                height:100%;
                .card-block {
                    padding: 10px 20px;
                }
            }
        }
    }
}

.page-installing,
.page-upgrading,
.page-download {
    .row {
        .col,
        .col-lg-6 {
            .card {
                color: white;
                background-color: #222;
            }
        }
    }
}

//
// section-main
//
.section-main {
    padding-left: 40px;
    padding-top: 40px;
    min-height: 1000px;
    padding-bottom: 100px;
}

.section-main h1 {
    font-size: 3.5rem;
    color: $color-z-darker;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 24px;
    font-weight: 700;
    &:after {
        content: "";
        background: $color-gray-darkest;
        position: absolute;
        bottom: -1px;
        left: 0px;
        height: 7px;
        width: 10%;
    }
}

//
// section-article
//
.section-article h2 {
    margin-bottom: 10px;
    color: $color-gray-darker;
}

.section-article .card-code {
    margin-bottom: 30px;
}

//
// section-faq
//
.section-faq h2 {
    margin-bottom: $margin-header-bottom;
}

.section-faq .card {
    margin-bottom: $margin-section-sm;
}

.section-faq .card .card-header h3 {
    font-size: $font-size-lg;
}

.section-faq .card .card-header h3 a {
    display: block;
    position: relative;
}

.section-faq .card .card-header h3 a span {
    margin-right: 20px;
}

.section-faq .card .card-header h3 a:after {
    content: "\f078";
    font-family: 'FontAwesome';
    position: absolute;
    right: 0;
}

.section-faq .card .card-header h3 a[aria-expanded="true"]:after {
    content: "\f077";
}

//
// section-header
//
.section-header {
    min-height: 200px;
    text-align: center;
}

.section-header h1 {
    font-size: 5rem;
    text-align: center;
    padding-top: 50px;
}

.section-header .h2-outer {
    padding-bottom: 40px;
}

.section-free,
.section-premium {
    h4 {
        margin: 15px auto;
    }
}

.section-free {
    a {
        display: block;
        color: white;
        font-size: 14px;
    }
    .col-2 {
        padding: 10px 0;
        border-top: 1px solid $color-gray-darker;
        border-bottom: 1px solid $color-gray-darker;
        margin: 0 10px;
    }
}

@media (max-width: 990px) {
    .section-header {
        h1 {
            font-size: 3rem;
        }
        h2 {
            color: #a0a0a0;
        }
    }
    .section-faq .card .card-header h3 a:after {
        right: -10px;
        top: calc(50% - 16px);
    }
    #main-container-z {
        .section-main {
            padding: 10px;
            h1 {
                font-size: 2.5rem;
            }
            h2 {
                font-size: 1.5rem;
            }
        }
    }
}